<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@include file="/common/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<h1>动态三级联动</h1>
		省:<select id="sheng" onchange="getShi(this)">
			<option>--请选择--</option>
		</select>
		市:<select id="shi" onchange="getXian(this)">
		<option>--请选择--</option>
	</select>
		县(区):<select id="xian">
		<option>--请选择--</option>
	</select>
</body>
	<script type="text/javascript">
		function getSheng(){
			$.ajax({
				url:"<%=path%>/tCityController/getCityByPid",
				data:{pid:0},
				dataType:"json",
				type:"post",
				async:false,
				success:function(result){
					var city = result;
					var html = "<option value='-1'>--请选择--</option>";
					$(city).each(function(i,e){
						html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
					})
					$("#sheng").html(html)
				},
				error:function(){
					toastr.error("系统异常,请联系管理员");
				}
			})
		}
		
		$(function(){
			getSheng();
		})
		
		function getShi(obj){
			var pid = $(obj).val();
			$.ajax({
				url:"<%=path%>/tCityController/getCityByPid",
				data:{pid:pid},
				dataType:"json",
				type:"post",
				async:false,
				success:function(result){
					var city = result;
					var html = "<option value='-1'>--请选择--</option>";
					$(city).each(function(i,e){
						html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
					})
					$("#shi").html(html)
					$("#xian").html("<option value='-1'>--请选择--</option>")
				},
				error:function(){
					toastr.error("系统异常,请联系管理员");
				}
			})
		}
		
		function getXian(obj){
			var pid = $(obj).val();
			$.ajax({
				url:"<%=path%>/tCityController/getCityByPid",
				data:{pid:pid},
				dataType:"json",
				type:"post",
				async:false,
				success:function(result){
					var city = result;
					var html = "<option value='-1'>--请选择--</option>";
					$(city).each(function(i,e){
						html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
					})
					$("#xian").html(html)
				},	
				error:function(){
					toastr.error("系统异常,请联系管理员");
				}
			})
		}
	</script>
</html>